import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './useAge.css'
import locale from 'antd/es/date-picker/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';
import * as XLSX from 'xlsx';
import { Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
dayjs.locale('zh-cn');
import PieChartComponent from '../echarts/serveCharts/echarts1'
const { RangePicker } = DatePicker;
import { DatePicker, ConfigProvider } from 'antd';


export default function useAge() {
    const handleExport = () => {
        // 准备导出数据
        const data = [
            ['序号', '年龄段', '人次', '比例'],
            ['1', '50岁以下', '100', '10.8%'],
            ['2', '50-60岁', '240', '26.0%'],
            ['3', '60-70岁', '120', '13.0%'],
            ['4', '70-80岁', '120', '13.0%'],
            ['5', '80岁以上', '340', '37.2%'],
            ['合计', '', '920', '100%']
        ];

        // 创建工作簿
        const ws = XLSX.utils.aoa_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "用户年龄分析");

        // 导出文件
        XLSX.writeFile(wb, "用户年龄分析.xlsx");
    };

    return (
        <>
            <ConfigProvider locale={zhCN}>
                <div className='zzj_useAge_big_div'>
                    <div className="zzj_useAge_content_div">
                        <div className='zzj_useAge_title_div'>
                            <div className='zzj_useAge_main_div'></div>
                            <span>
                                用户年龄分析
                            </span>
                        </div>
                        <div className='zzj_useAge_date_div'>
                            <span>选择日期</span>
                            <RangePicker style={{ height: '1rem', width: '10rem' }} />
                        </div>

                        {/* 用户年龄构成盒子 */}
                        <div className="zzj_useAge_echarts_div">
                            <span>用户年龄构成</span>
                            <div className='zzj_useAge_echarts'>
                                <PieChartComponent />
                            </div>
                        </div>
                        {/*统计列表 */}
                        <div className='zzj_useAge_age_sex_div'>
                            <div className='zzj_useAge_age_sex_big_div'>
                                <div className="zzj_useAge_table_header">
                                    <Button 
                                        type="primary" 
                                        icon={<DownloadOutlined />}
                                        onClick={handleExport}
                                        className="export-button"
                                    >
                                        导出
                                    </Button>
                                </div>
                                <table className="zzj_useAge_table">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>年龄段</th>
                                            <th>人次</th>
                                            <th>比例</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>50岁以下</td>
                                            <td>100</td>
                                            <td>10.8%</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>50-60岁</td>
                                            <td>240</td>
                                            <td>26.0%</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>60-70岁</td>
                                            <td>120</td>
                                            <td>13.0%</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>70-80岁</td>
                                            <td>120</td>
                                            <td>13.0%</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>80岁以上</td>
                                            <td>340</td>
                                            <td>37.2%</td>
                                        </tr>
                                        <tr className="total-row">
                                            <td>合计</td>
                                            <td></td>
                                            <td>920</td>
                                            <td>100%</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div className='zzj_useAge_label_div'>
                            <p>Copyright © DaisyAxure All Rights Reserved</p>
                        </div>
                    </div>
                </div>
            </ConfigProvider >
        </>
    )
}
